function gettext(url, callback) {
    //1.创建AJAX的实例
    let xhr = new XMLHttpRequest();
    //2.创建AJAX的请求
    xhr.open('GET', url);
    //3.发送AJAX的请求
    xhr.send();
    //4.接收服务器相应结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //获取到JSON字符串
                let respJSONStr = xhr.response;
                //将JSON字符串转换为对象的数据格式
                let res = JSON.parse(respJSONStr);
                callback(res)
            }
        }
    }
}
//渲染进入页面的分页器按钮
let button = document.querySelector(".button")
button.innerHTML += `
                    <button class="begin">首页</button>
                    <button class="begin">上一页</button>
                    <button class="one">1</button>
                    <button class="tow">2</button>
                    <button class="finish">下一页</button>
                    <button class="finish">尾页</button>`

//渲染进入页面的数据
let commodityDetails = document.querySelector(".commodityDetails")
gettext("scripts/serviceSupport.json", function (res) {
    for (let i in res) {
        let arr = res[i]
        let att = arr.splice(0, arr.length - 1)
        paging(att)
    }
})
//获取分页器的各个按钮
let buttons = document.querySelectorAll(".button>button")
let begin = document.querySelectorAll(".begin")
let finish = document.querySelectorAll(".finish")
let one = document.querySelector(".one")
let tow = document.querySelector(".tow")

//分页器点击切换按钮样式和渲染数据
for (let key in buttons) {
    buttons[key].onclick = function () {
        if (key < 3) {
            commodityDetails.innerHTML = ''
            gettext("scripts/serviceSupport.json", function (res) {
                for (let i in res) {
                    let arr = res[i]
                    let att = arr.splice(0, 5)
                    paging(att)
                }
            })
            pagingShow(false)
        }
        if (key > 2) {
            commodityDetails.innerHTML = ''
            gettext("scripts/serviceSupport.json", function (res) {
                for (let i in res) {
                    let arr = res[i]
                    let att = arr.splice(5)
                    paging(att)
                }
            })
            pagingShow(true)
        }
    }
}

//封装分页渲染数据的函数
function paging(att) {
    for (let j in att) {
        commodityDetails.innerHTML += `
    <div class="commodityDetailsBox">
        <div class="time">
            <span>${att[j].month}</span>
            <span>${att[j].Vintage}</span>
        </div>
        <div class="describe">
            <p>${att[j].issue}</p>
            <div>
                <span>${att[j].way}</span>
            </div>
        </div>
        <div class="toolDrawing">
            <img src="./image/右.png" alt="">
        </div>
    </div>
    <hr>`
    }
}
//设置点击分类渲染数据
let selectSpan = document.querySelectorAll('.select>span')
for(let i in selectSpan){
    selectSpan[i].onclick = function(){
        button.innerHTML = ''
        commodityDetails.innerHTML = ''
            gettext("scripts/serviceSupport.json", function (res) {
                for (let key in res) {
                    let arr = res[key]
                    let att = arr.splice(4-2*i, 2)
                    paging(att)
                }
            })
    }
}
//封装分页器切换样式变化的函数
function pagingShow(ss) {
    if (!ss) {
        finish[0].classList.remove("hide")
        finish[1].classList.remove("hide")
        begin[0].classList.remove("show")
        begin[1].classList.remove("show")
        one.classList.remove("color")
        tow.classList.remove("color")
    }
    else if (ss) {
        
        finish[0].classList.add("hide")
        finish[1].classList.add("hide")
        begin[0].classList.add("show")
        begin[1].classList.add("show")
        one.classList.add("color")
        tow.classList.add("color")
    }
}
gettext("scripts/serviceSupport.json", function (res) {
for (let i in res) {
    let arr = res[i]
    let att = arr.splice(4, 2)
    console.log(att)
}
})
